<template>
	<div class="content">
		<uni-section class="mb-10" title="我的牙米" style="background: transparent;font-size: 28rpx">
			<template v-slot:right>
				<view class="rightText">
					消费/充值记录
					<uni-icons type="right" size="16" style="color: #b0b0b0; margin-left: 10rpx" color="#b0b0b0"></uni-icons>
				</view>
			</template>
		</uni-section>

		<!-- <uni-card title="基础卡片" extra="额外信息">
			<text class="uni-body">这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
		</uni-card> -->
		<div class="recharge-card">
			<div class="balance-card">
				<div class="balance-display">
					<span>{{ content.toothRice || 0 }}</span>
				</div>
				<div class="balance-btn"><button class="recharge-button" :disabled="true" style="background-color: #b0b0b0;color: #ffff">充值</button></div>
			</div>
			<div class="line"></div>
			<p class="description">可用于解锁站内更多精彩内容与权益</p>
		</div>

		<div style="margin-top: 40rpx">
			<uni-section class="mb-10" title="我的收入" style="background: transparent">
				<template v-slot:right>
					<view class="rightText" @click="handleToUrl('/mineComponentPackage/component/income/index')">
						收支明细
						<uni-icons type="right" size="16" style="color: #b0b0b0; margin-left: 10rpx"></uni-icons>
					</view>
				</template>
			</uni-section>
			<div class="recharge-card2" style="background: #ffff">
				<div class="balance-card">
					<div class="balance-display2">
						<span>{{ content.balance || 0 }}</span>
						<p class="">含待结算{{ content.unavailableBalance || 0 }}</p>
					</div>
					<div class="balance-btn"><button class="recharge-button2" @click="handleToUrl('/mineComponentPackage/component/withdraw/index')">提现</button></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			balance: 0,
			balance2: 10009.0,
			balance3: '含待结算 846.00 元',
			content: {},
		};
	},
	onLoad() {
		uni.showLoading({
			title: '加载中'
		})
		this.$post('/yahe/account/myLotusWallet', {}, '1').then((res) => {
			if (res.success) {
				this.content = res.content;
				
			} else {
				this.$toast(res.message, 'none')
			}
			
		});
	},
	methods: {
		handleToUrl(url) {
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style>
.content {
	box-sizing: border-box;
	height: 100%;
	background-color: #f5f5f5;
}

uni-section span {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: bold;
	font-size: 36rpx;
	color: #3a3a3a;
	line-height: 33rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.rightText {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #b0b0b0;
	line-height: 33rpx;
	text-align: right;
	font-style: normal;
	text-transform: none;
}

.recharge-card {
	height: 300rpx;
	background: linear-gradient(#10beaf 100%, #29d8c6 0%);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	margin: 20rpx;
	padding: 20rpx 0rpx;
}

.recharge-card2 {
	height: 240rpx;
	background: linear-gradient(#10beaf 100%, #29d8c6 0%);
	border-radius: 10px 10px 10px 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	margin: 20rpx;
	padding: 60rpx 0px 0px 0px;
}

.balance-card {
	display: flex;
	justify-content: space-between;
	margin-left: 80rpx;
}

.balance-display {
	display: flex;
	font-size: 40rpx;
	color: white;
	align-items: center;
	font-size: 56rpx;
	font-weight: bold;
}

.balance-display2 {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	line-height: 59rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	margin-top: 10rpx;
}

.balance-display2 span {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 500;
	font-size: 60rpx;
	color: #3a3a3a;
	line-height: 59rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.balance-display2 p {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #b0b0b0;
	line-height: 26rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.balance-btn {
	display: inline-block;
}

.recharge-button {
	width: 160rpx;
	background-color: white;
	border: none;
	border-radius: 40rpx;
	font-size: 26rpx;
	align-self: flex-end;
	margin-right: 40rpx;
	font-weight: 500;
	color: #0a978e;
	text-align: center;
	font-style: normal;
	text-transform: none;
}

.recharge-button2 {
	background-color: #10beaf;
	color: #ffff;
	width: 160rpx;
	
	border: none;
	border-radius: 40rpx;
	font-size: 26rpx;
	align-self: flex-end;
	margin-right: 40rpx;
	font-weight: 500;
	text-align: center;
	font-style: normal;
	text-transform: none;
}

.description {
	font-size: 28rpx;
	color: white;
	text-align: left;
	margin-left: 60rpx;

	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	color: #ffffff;
	line-height: 28rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.line {
	margin: 0 auto;
	width: 90%;
	height: 0rpx;
	border: 0.2rpx solid #efefef;
	opacity: 0.32;
}
</style>
